import React from "react"
import PropTypes from "prop-types"
import Ionicon from "react-ionicons"
import { VIEW_LIST, VIEW_CHART } from "../utility"

// 通过对比传入的视图数据和 a 标签代表的视图从而决定是否带有 active 类
const generateLinkClass = (current, view) => {
  return current === view ? "nav-link active" : "nav-link"
}

function ViewTab({ activeTab, onChangeView }) {
  return (
    <ul className="nav nav-tabs nav-fill my-4">
      <li className="nav-item">
        <a
          href="#1"
          className={generateLinkClass(activeTab, VIEW_LIST)}
          onClick={e => {
            e.preventDefault()
            onChangeView(VIEW_LIST)
          }}
        >
          <Ionicon
            className="rounded-circle"
            fontSize="30px"
            color="#007bff"
            icon="ios-paper"
          />
          列表模式
        </a>
      </li>
      <li className="nav-item">
        <a
          href="#1"
          className={generateLinkClass(activeTab, VIEW_CHART)}
          onClick={e => {
            e.preventDefault()
            onChangeView(VIEW_CHART)
          }}
        >
            <Ionicon
              className="rounded-circle"
              fontSize="30px"
              color="#007bff"
              icon="ios-pie"
            />
            图表模式
        </a>
      </li>
    </ul>
  )
}

ViewTab.propTypes = {
  activeTab: PropTypes.string.isRequired,
  onChangeView: PropTypes.func.isRequired
}

export default ViewTab
